import { getallusersapi } from "@/apis/user";
import { formattime } from "@/utils";
import React, { useEffect, useState } from "react";
import { Circlewrap } from "./styled";
import Routertran from "@/components/routertran";
import { useNavigate } from "react-router-dom";
export default function Circle() {
  const navigate = useNavigate();
  const [users, setUsers] = useState<
    {
      avatar: string;
      id: number;
      username: string;
      createAt: string;
    }[]
  >();
  useEffect(() => {
    getallusersapi().then((res: any) => {
      setUsers(res.result);
    });
  }, []);
  return (
    <Circlewrap>
      {/* <Routertran top={70} left={80}></Routertran> */}
      <div className="main">
        {users && users?.length > 0 ? (
          users.map((item) => {
            return (
              <div
                className="one"
                key={item.id}
                onClick={(e) => navigate(`/userpage/${item.id}`)}
              >
                <img src={item.avatar} alt="" />
                <div className="username">{item.username}</div>
                <div className="time">
                  {formattime(item.createAt).slice(0, 10)}
                </div>
              </div>
            );
          })
        ) : (
          <Routertran width={700} height={500} top={70} left={150}></Routertran>
        )}
      </div>
    </Circlewrap>
  );
}
